<template>
  <a-layout class="bgc-white page-box-employer-setting">
    <a-row class="p24 btmline" style="border: none">
      <a-col :span="2">
        <a-icon type="left" class="fs20" @click="goback" />
      </a-col>
      <div class="left6" style="cursor: pointer" @click="goback">返回</div>
    </a-row>
    <a-collapse v-model="activeKey" class="p24" :bordered="false">
      <a-collapse-panel key="1" header="基本信息" style="border-top: none">
        <a-row>
          <div class="table-header">
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
          </div>
          <a-col v-for="(item, index) in allData.companyEmpNecessaryBasicVOList" :key="index" :span="12">
            <div class="table-header-row">
              <p>
                <span class="name-box">{{ item.fieldName }}</span>
              </p>
              <p>
                <a-tooltip>
                  <template slot="title" v-if="item.fieldCode === 'idCard' || item.fieldCode === 'name'"> 该字段默认必填 </template>
                  <a-checkbox
                    v-model="item.isNecessary"
                    :disabled="item.fieldCode === 'idCard' || item.fieldCode === 'name'"
                    @change="remoteControl(item, 'isNecessary')"
                /></a-tooltip>
              </p>
              <p>
                <a-tooltip>
                  <template slot="title" v-if="item.fieldCode === 'idCard' || item.fieldCode === 'name'"> 该字段默认开启</template>
                  <a-checkbox
                    v-model="item.isOpen"
                    :disabled="item.fieldCode === 'idCard' || item.fieldCode === 'name'"
                    @change="remoteControl(item, 'isOpen')"
                  />
                </a-tooltip>
              </p>
            </div>
          </a-col>
          <a-col v-for="(item, index) in allData.companyAdditionalFieldsBasicVOList" :key="index.id" :span="12">
            <div class="table-header-row2">
              <p class="name-box">
                <span>{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" class="checkbox1" @change="remoteControlAdd(item, 'isNecessary')" />
              </p>
              <div class="checkbox2">
                <a-checkbox v-model="item.isOpen" @change="remoteControlAdd(item, 'isOpen')" />
                <div class="item-delete">
                  <div>
                    <a-button class="add-field" @click="edit(item, 'basic', index)">
                      <a-icon type="form" class="editInformation" />
                    </a-button>
                  </div>
                  <a-popconfirm title="确定删除吗？" @confirm="confirmDelete(item.id)">
                    <a-icon slot="icon" type="question-circle-o" style="color: red" />
                    <a href="#">
                      <a-icon type="delete" class="add-delete" />
                    </a>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </a-col>
          <div>
            <a-button class="add-field-add" @click="showModal('visible1')">
              <a-icon type="plus-circle" class="add-field-icon" />添加字段
            </a-button>
            <a-modal v-model="visible2" title="添加新字段" @ok="handleAddOk('contact')">
              <a-form-model ref="addForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item
                  ref="fieldName"
                  prop="fieldName"
                  label="字段名称"
                  :rules="{
                    required: true,
                    message: '必填'
                  }"
                  help="1-8个字符，不能与现有字段重复"
                >
                  <a-input v-model="form.fieldName" placeholder="请输入字段名称" :max-length="8" />
                </a-form-model-item>
                <a-form-model-item
                  ref="fieldType"
                  prop="fieldType"
                  label="字段类型"
                  :rules="{
                    required: true,
                    message: '必选'
                  }"
                >
                  <a-select v-model="form.fieldType" placeholder="请选择您要添加的字段类型" @change="handleChange">
                    <a-select-option value="1">选项</a-select-option>
                    <a-select-option value="2">文本</a-select-option>
                    <a-select-option value="3">日期</a-select-option>
                    <a-select-option value="4">长文本</a-select-option>
                  </a-select>
                </a-form-model-item>
                <a-form-model style="margin-left: 36px" v-if="show === 2" ref="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel">
                  <a-form-model-item
                    v-for="(item, index) in form.dropDownArray"
                    :key="index"
                    v-bind="index === 0 ? formItemLayout : {}"
                    :label="index === 0 ? '字段选项' : ''"
                    :rules="{
                      required: true,
                      message: '请输入自定义选项',
                      trigger: 'blur'
                    }"
                    class="field option"
                  >
                    <a-input
                      v-bind="index === 0 ? formItemLayout : {}"
                      :value="item"
                      placeholder="自定义选项"
                      style="width: 60%; margin-left: 10px"
                      @change="handleOptionChange($event, index)"
                    />
                    <a-icon
                      v-if="form.dropDownArray.length > 1"
                      class="dynamic-delete-button"
                      type="delete"
                      :disabled="form.dropDownArray.length === 1"
                      @click="removeDomain(index)"
                    />
                  </a-form-model-item>
                  <a-form-model-item class="addbutton">
                    <a-button type="dashed" style="width: 60%; margin-left: 10px" @click="addDomain">
                      <a-icon type="plus" />添加自定义选项
                    </a-button>
                  </a-form-model-item>
                </a-form-model>
                <a-form-model-item ref="description" prop="description" label="字段描述">
                  <a-input v-model="form.description" placeholder="请输入字段描述" />
                </a-form-model-item>
              </a-form-model>
            </a-modal>
          </div>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="4" header="联系信息" style="border-top: none">
        <a-row>
          <div class="table-header">
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
          </div>
          <a-col v-for="(item, index) in allData.companyEmpNecessaryContactVOList" :key="index" :span="12">
            <div class="table-header-row">
              <p>
                <span class="name-box">{{ item.fieldName }}</span>
              </p>
              <p>
                <a-tooltip>
                  <template slot="title" v-if="item.fieldCode === 'phone'"> 该字段默认必填</template>
                  <a-checkbox
                    v-model="item.isNecessary"
                    :disabled="item.fieldCode === 'phone'"
                    @change="remoteControl(item, 'isNecessary')"
                  />
                </a-tooltip>
              </p>
              <p>
                <a-tooltip>
                  <template slot="title" v-if="item.fieldCode === 'phone'"> 该字段默认开启</template>
                  <a-checkbox v-model="item.isOpen" :disabled="item.fieldCode === 'phone'" @change="remoteControl(item, 'isOpen')"
                /></a-tooltip>
              </p>
            </div>
          </a-col>
          <a-col v-for="(item, index) in allData.companyAdditionalFieldsContactVOList" :key="index.id" :span="12">
            <div class="table-header-row2">
              <p class="name-box">
                <span>{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" class="checkbox1" @change="remoteControlAdd(item, 'isNecessary')" />
              </p>
              <div class="checkbox2">
                <a-checkbox v-model="item.isOpen" @change="remoteControlAdd(item, 'isOpen')" />
                <div class="item-delete">
                  <div>
                    <a-button class="add-field" @click="edit(item, 'contact')">
                      <a-icon type="form" class="editInformation" />
                    </a-button>
                  </div>
                  <a-popconfirm title="确定删除吗？" @confirm="confirmDelete(item.id)">
                    <a-icon slot="icon" type="question-circle-o" style="color: red" />
                    <a href="#">
                      <a-icon type="delete" class="add-delete" />
                    </a>
                  </a-popconfirm>
                </div>
              </div>
            </div>
          </a-col>
          <div>
            <a-button class="add-field-add" @click="showModal('visible2')">
              <a-icon type="plus-circle" class="add-field-icon" />添加字段
            </a-button>
            <a-modal v-model="visible1" title="添加新字段" @ok="handleAddOk('basic')">
              <a-form-model ref="addForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item
                  ref="fieldName"
                  prop="fieldName"
                  label="字段名称"
                  :rules="{
                    required: true,
                    message: '必填'
                  }"
                  help="1-8个字符，不能与现有字段重复"
                >
                  <a-input v-model="form.fieldName" placeholder="请输入字段名称" :max-length="8" />
                </a-form-model-item>
                <a-form-model-item
                  ref="fieldType"
                  prop="fieldType"
                  label="字段类型"
                  :rules="{
                    required: true,
                    message: '必选'
                  }"
                >
                  <a-select v-model="form.fieldType" placeholder="请选择您要添加的字段类型" @change="handleChange">
                    <a-select-option value="1">选项</a-select-option>
                    <a-select-option value="2">文本</a-select-option>
                    <a-select-option value="3">日期</a-select-option>
                    <a-select-option value="4">长文本</a-select-option>
                  </a-select>
                </a-form-model-item>

                <a-form-model v-if="show === 2" ref="dynamicValidateForm" v-bind="formItemLayoutWithOutLabel" style="margin-left: 36px">
                  <a-form-model-item
                    v-for="(item, index) in form.dropDownArray"
                    :key="index"
                    v-bind="index === 0 ? formItemLayout : {}"
                    :label="index === 0 ? '字段选项' : ''"
                    :rules="{
                      required: true,
                      message: '请输入自定义选项',
                      trigger: 'blur'
                    }"
                    class="field option"
                  >
                    <a-input
                      v-bind="index === 0 ? formItemLayout : {}"
                      :value="item"
                      placeholder="自定义选项"
                      style="width: 60%; margin-left: 10px"
                      @change="handleOptionChange($event, index)"
                    />
                    <a-icon
                      v-if="form.dropDownArray.length > 1"
                      class="dynamic-delete-button"
                      type="delete"
                      :disabled="form.dropDownArray.length === 1"
                      @click="removeDomain(index)"
                    />
                  </a-form-model-item>
                  <a-form-model-item class="addbutton">
                    <a-button type="dashed" style="width: 60%; margin-left: 10px" @click="addDomain">
                      <a-icon type="plus" />添加自定义选项
                    </a-button>
                  </a-form-model-item>
                </a-form-model>
                <a-form-model-item ref="description" prop="description" label="字段描述">
                  <a-input v-model="form.description" placeholder="请输入字段描述" />
                </a-form-model-item>
              </a-form-model>
            </a-modal>
          </div>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="16" header="家庭成员" style="border-top: none">
        <a-checkbox
          v-if="allData.companyEmpNecessaryVOList"
          slot="extra"
          v-model="allData.companyEmpNecessaryVOList[2].isNecessary"
          class="extrabox"
          @click="handleClick(allData.companyEmpNecessaryVOList[2], 'empFamily')"
        />
        <span slot="extra" class="extraStopBox" @click="handleStopClick"> 是否必须添加 </span>
        <a-row>
          <div class="table-header">
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
          </div>
          <a-col v-for="(item, index) in allData.companyEmpNecessaryFamilyMembersVOList" :key="index" :span="12">
            <div class="table-header-row">
              <p>
                <span class="name-box">{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" @change="remoteControl(item, 'isNecessary')" />
              </p>
              <p>
                <a-tooltip>
                  <template slot="title" v-if="item.fieldCode === 'name' || item.fieldCode === 'phone'">该字段默认开启</template>
                  <a-checkbox
                    v-model="item.isOpen"
                    :disabled="item.fieldCode === 'name' || item.fieldCode === 'phone'"
                    @change="remoteControl(item, 'isOpen')"
                  />
                </a-tooltip>
              </p>
            </div>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="5" header="紧急联系人" style="border-top: none">
        <a-checkbox
          v-if="allData.companyEmpNecessaryVOList"
          slot="extra"
          v-model="allData.companyEmpNecessaryVOList[0].isNecessary"
          class="extrabox"
          @click="handleClick(allData.companyEmpNecessaryVOList[0], 'empContacts')"
        />
        <span slot="extra" class="extraStopBox" @click="handleStopClick"> 是否必须添加 </span>
        <a-row>
          <div class="table-header">
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
          </div>
          <a-col v-for="(item, index) in allData.companyEmpNecessaryEmergencyContactVOList" :key="index" :span="12">
            <div class="table-header-row">
              <p>
                <span class="name-box">{{ item.fieldName }}</span>
              </p>
              <p>
                <a-tooltip>
                  <template slot="title" v-if="item.fieldCode === 'name' || item.fieldCode === 'phone'"> 该字段默认必填 </template>
                  <a-checkbox
                    v-model="item.isNecessary"
                    :disabled="item.fieldCode === 'name' || item.fieldCode === 'phone'"
                    @change="remoteControl(item, 'isNecessary')"
                  />
                </a-tooltip>
              </p>
              <p>
                <a-tooltip>
                  <template slot="title" v-if="item.fieldCode === 'name' || item.fieldCode === 'phone'"> 该字段默认开启 </template>
                  <a-checkbox
                    v-model="item.isOpen"
                    :disabled="item.fieldCode === 'name' || item.fieldCode === 'phone'"
                    @change="remoteControl(item, 'isOpen')"
                  />
                </a-tooltip>
              </p>
            </div>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="12" header="教育经历" style="border-top: none">
        <a-checkbox
          v-if="allData.companyEmpNecessaryVOList"
          slot="extra"
          v-model="allData.companyEmpNecessaryVOList[1].isNecessary"
          class="extrabox"
          @click="handleClick(allData.companyEmpNecessaryVOList[1], 'empEducation')"
        />
        <span slot="extra" class="extraStopBox" @click="handleStopClick"> 是否必须添加 </span>
        <a-row>
          <div class="table-header">
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
          </div>
          <a-col v-for="(item, index) in allData.companyEmpNecessaryEducationVOList" :key="index" :span="12">
            <div class="table-header-row">
              <p>
                <span class="name-box">{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" @change="remoteControl(item, 'isNecessary')" />
              </p>
              <p>
                <a-checkbox v-model="item.isOpen" @change="remoteControl(item, 'isOpen')" />
              </p>
            </div>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="15" header="工作经历" style="border-top: none">
        <a-checkbox
          v-if="allData.companyEmpNecessaryVOList"
          slot="extra"
          v-model="allData.companyEmpNecessaryVOList[4].isNecessary"
          class="extrabox"
          @click="handleClick(allData.companyEmpNecessaryVOList[4], 'empWork')"
        />
        <span slot="extra" class="extraStopBox" @click="handleStopClick"> 是否必须添加 </span>
        <a-row>
          <div class="table-header">
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
          </div>
          <a-col v-for="(item, index) in allData.companyEmpNecessaryWorkVOList" :key="index" :span="12">
            <div class="table-header-row">
              <p>
                <span class="name-box">{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" @change="remoteControl(item, 'isNecessary')" />
              </p>
              <p>
                <a-checkbox v-model="item.isOpen" @change="remoteControl(item, 'isOpen')" />
              </p>
            </div>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel key="8" header="培训经历" style="border-top: none">
        <a-checkbox
          v-if="allData.companyEmpNecessaryVOList"
          slot="extra"
          v-model="allData.companyEmpNecessaryVOList[3].isNecessary"
          class="extrabox"
          @click="handleClick(allData.companyEmpNecessaryVOList[3], 'empTrain')"
        />
        <span slot="extra" class="extraStopBox" @click="handleStopClick"> 是否必须添加 </span>
        <a-row>
          <div class="table-header">
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
            <div class="table-header-row1">
              <p>字段名称</p>
              <p>是否必填</p>
              <p>是否开启</p>
            </div>
          </div>
          <a-col v-for="(item, index) in allData.companyEmpNecessaryTrainVOList" :key="index" :span="12">
            <div class="table-header-row">
              <p>
                <span class="name-box">{{ item.fieldName }}</span>
              </p>
              <p>
                <a-checkbox v-model="item.isNecessary" @change="remoteControl(item, 'isNecessary')" />
              </p>
              <p>
                <a-checkbox v-model="item.isOpen" @change="remoteControl(item, 'isOpen')" />
              </p>
            </div>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>

    <a-modal v-model="editvisible" title="编辑字段" @ok="handleEditOk(code)">
      <a-form-model ref="form" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item
          ref="fieldName"
          prop="fieldName"
          label="字段名称"
          :rules="{
            required: true,
            message: '必填'
          }"
          help="1-8个字符，不能与现有字段重复"
        >
          <a-input v-model="form.fieldName" placeholder="请输入字段名称" :max-length="8" />
        </a-form-model-item>
        <a-form-model-item
          ref="fieldType"
          label="字段类型"
          prop="fieldType"
          :rules="{
            required: true,
            message: '必选'
          }"
        >
          <a-select v-model="form.fieldType" v-selection placeholder="选项" :disabled="true" @change="handleChange">
            <a-select-option v-for="(item2, index2) in fieldType" :key="index2 + 1" :value="index2 + 1">{{ item2 }}</a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model style="margin-left: 36px" v-if="form.fieldType === 1" v-bind="formItemLayoutWithOutLabel">
          <a-form-model-item
            v-for="(item, index) in form.dropDownArray"
            :key="index"
            v-bind="index === 0 ? formItemLayout : {}"
            :label="index === 0 ? '字段选项' : ''"
            :rules="{
              required: true,
              message: '请输入自定义选项',
              trigger: 'blur'
            }"
            class="field option"
          >
            <a-input
              :value="item"
              placeholder="自定义选项"
              style="width: 60%; margin-left: 10px"
              @change="handleOptionChange($event, index)"
            />
            <a-icon
              v-if="form.dropDownArray.length > 1"
              class="dynamic-delete-button"
              type="delete"
              :disabled="form.dropDownArray.length === 1"
              @click="removeDomain2(index)"
            />
          </a-form-model-item>
          <a-form-model-item v-bind="formItemLayoutWithOutLabel">
            <a-button type="dashed" style="width: 60%; margin-left: 10px" @click="addDomain2">
              <a-icon type="plus" />添加自定义选项
            </a-button>
          </a-form-model-item>
          <a-form-model-item v-bind="formItemLayoutWithOutLabel" />
        </a-form-model>
        <a-form-model-item ref="description" prop="description" label="字段描述">
          <a-input v-model="form.description" placeholder="请输入字段描述" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-layout>
</template>

<script>
import {
  getNecessaryFields,
  postNecessaryFieldBatchDTO,
  postAdditionalFieldsAddDTO,
  deleteAdditionalFieldsQuery,
  putAdditionalFieldsUpdateDTO,
  putAdditionalFieldsOpen,
  putAdditionalFieldsNecessary,
  putcompanyEmpNecessaries
} from "@/api/staff/entry";
import Vue from "vue";
import { FormModel } from "ant-design-vue";
Vue.use(FormModel);

Vue.directive("selection", {
  inserted(el, binding) {}
});

export default {
  data() {
    return {
      data: {},
      code: "",
      currentItem: {},
      fieldType: ["选项", "文本", "日期", "长文本"],
      status: 0,
      allData: {},
      allNewData: {},
      show: 0,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      },
      dropDownArray: [],
      dynamicValidateForm: {
        domains: []
      },

      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      form: {},
      visible1: false,
      visible2: false,
      editvisible: false,
      activeKey: ["1", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"],
      companyId: "",
      text: 1,
      res: {},
      result: {}
    };
  },

  created() {
    this.companyId = this.$store.state.hr.companyId;
    this.getData();
  },
  methods: {
    handleStopClick() {
      event.stopPropagation();
    },
    handleClick(i, tag) {
      event.stopPropagation();
      if (tag === "empFamily") {
        this.data.id = i.id;
        this.data.isNecessary = !i.isNecessary;
        this.data.moduleCode = i.moduleCode;
        this.data.moduleName = i.moduleName;
      }
      if (tag === "empContacts") {
        this.data.id = i.id;
        this.data.isNecessary = !i.isNecessary;
        this.data.moduleCode = i.moduleCode;
        this.data.moduleName = i.moduleName;
      }
      if (tag === "empEducation") {
        this.data.id = i.id;
        this.data.isNecessary = !i.isNecessary;
        this.data.moduleCode = i.moduleCode;
        this.data.moduleName = i.moduleName;
      }
      if (tag === "empWork") {
        this.data.id = i.id;
        this.data.isNecessary = !i.isNecessary;
        this.data.moduleCode = i.moduleCode;
        this.data.moduleName = i.moduleName;
      }
      if (tag === "empTrain") {
        this.data.id = i.id;
        this.data.isNecessary = !i.isNecessary;
        this.data.moduleCode = i.moduleCode;
        this.data.moduleName = i.moduleName;
      }
      putcompanyEmpNecessaries(this.data).then((res) => {
        this.getData();
      });
    },
    handleOptionChange($event, index) {
      const val = $event.target.value;
      this.$set(this.form.dropDownArray, index, val);
    },
    confirmDelete(id) {
      this.$confirm({
        title: "删除确认",
        content: "将删除全部用工单位的花名册及模板中的本字段",
        onOk: () => {
          deleteAdditionalFieldsQuery(id)
            .then(() => {
              this.getData();
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    remoteControl(item, tag) {
      if (item.isNecessary && tag === "isNecessary") {
        item.isOpen = true;
      } else if (!item.isOpen && tag === "isOpen") {
        item.isNecessary = false;
      }
      postNecessaryFieldBatchDTO(item)
        .then((res) => {
          this.getData();
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          this.getData();
        });
    },
    edit(item, tempCode, index) {
      this.currentItem = item;
      this.status = 0;
      this.editvisible = true;
      this.code = tempCode;
      this.form = JSON.parse(JSON.stringify(item));
    },
    remoteControlAdd(item, tag) {
      if (item.isNecessary && tag === "isNecessary") {
        item.isOpen = true;
      } else if (!item.isOpen && tag === "isOpen") {
        item.isNecessary = false;
      }
      const req = tag === "isOpen" ? putAdditionalFieldsOpen : putAdditionalFieldsNecessary;
      req({
        ...item,
        companyAdditionalFieldsId: item.id
      }).catch((err) => {
        console.log(err);
      });
    },
    handleChange(value) {
      this.show = "";
      if (value === "1") {
        this.show = 2;
      }
      if (value === "2") {
        this.show = 3;
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(index) {
      this.form.dropDownArray.splice(index, 1);
    },
    removeDomain2(index) {
      this.form.dropDownArray.splice(index, 1);
    },
    addDomain() {
      this.form.dropDownArray.push("");
    },
    addDomain2() {
      this.form.dropDownArray.push("");
    },
    onSubmit() {},
    showModal(tag) {
      this.$nextTick(() => {
        this.$refs.addForm.resetFields();
      });
      this.show = 0;
      this.dropDownArray = [];
      this.form = {
        dropDownArray: []
      };
      this[tag] = true;
      this.status = 1;
    },
    handleEditOk(item, code) {
      let str = "";
      let flag = false;
      if (this.form.dropDownArray) {
        this.form.dropDownArray.forEach((item, index) => {
          if (item === "") flag = true;
          str += item;
          if (index !== this.form.dropDownArray.length - 1) {
            str += ",";
          }
        });
      }
      if (flag) {
        this.$notification["error"]({
          message: "error",
          description: "自定义选项不能为空，修改失败"
        });
        return;
      }

      const data = {
        id: this.currentItem.id,
        companyId: this.companyId,
        fieldType: this.form.fieldType,
        fieldName: this.form.fieldName,
        moduleCode: item,
        options: str,
        description: this.form.description
      };
      if (data.fieldName && data.options) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$confirm({
              title: "修改确认",
              content: "字段的修改将同步到所有用工单位的花名册及模板",
              onOk: () => {
                putAdditionalFieldsUpdateDTO(data)
                  .then((res) => {
                    this.$notification["success"]({
                      message: "success",
                      description: "修改成功"
                    });
                    this.editvisible = false;
                    this.getData();
                  })
                  .catch((err) => {
                    console.log(err);
                  });
              }
            });
          }
        });
      } else if ((data.fieldName && data.fieldType === 2) || data.fieldType === 3 || data.fieldType === 4) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$confirm({
              title: "修改确认",
              content: "字段的修改将同步到所有用工单位的花名册及模板",
              onOk: () => {
                putAdditionalFieldsUpdateDTO(data)
                  .then((res) => {
                    this.$notification["success"]({
                      message: "success",
                      description: "修改成功"
                    });
                    this.editvisible = false;
                    this.getData();
                  })
                  .catch((err) => {
                    console.log(err);
                  });
              }
            });
          }
        });
      }
    },
    handleAddOk(code) {
      let str = "";
      let flag = false;
      this.form.dropDownArray.forEach((item, index) => {
        if (item === "") flag = true;
        str += item;
        if (index !== this.form.dropDownArray.length - 1) {
          str += ",";
        }
      });
      if (flag && this.form.fieldType === "1") {
        this.$notification["error"]({
          message: "error",
          description: "自定义选项不能为空，添加失败"
        });
        return;
      }
      if (this.form.dropDownArray.length === 0 && this.form.fieldType === "1") {
        this.$notification["error"]({
          message: "error",
          description: "自定义选项不能为空，添加失败，点击添加自定义选项"
        });
        return;
      }
      const data = {
        id: this.form.id,
        companyId: this.companyId,
        fieldName: this.form.fieldName,
        fieldType: this.form.fieldType,
        moduleCode: code,
        options: str,
        // textLength: this.form.textLength,
        description: this.form.description
      };
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          postAdditionalFieldsAddDTO(data).then((res) => {
            this.$notification["success"]({
              message: "success",
              description: "添加成功"
            });
            this.visible1 = false;
            this.visible2 = false;
            this.getData();
          });
        }
      });
    },

    getData(res) {
      getNecessaryFields({ companyId: this.companyId }).then((res) => {
        this.allData = res.data;
      });
    },

    goback() {
      this.$router.push({ path: "/staff/edit" });
    }
  }
};
</script>

<style lang="scss">
.left6 {
  z-index: 3;
  left: 45px;
  position: absolute;
  color: #595959;
  font-size: 16px;
  margin-top: -3px;
}
.extraStopBox {
  cursor: default;
  position: absolute;
  left: 200px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.65);
}
.extrabox {
  position: absolute;
  left: 170px;
}
.ant-form {
  margin-left: 5px;
}
.table-header {
  display: flex;
  flex-direction: row;
  flex: 1;
}
.table-header-row1 {
  background: #fafafa;
}
.table-header-row,
.table-header-row1 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex: 1;
  border: #d8d8d8 1px solid;
  border-top: none;
  border-left: none;
  p {
    width: 153px;
    margin: 13px 0;
  }
}
.table-header-row2 {
  display: flex;
  flex: 1;
  justify-content: space-around;
  border: #d8d8d8 1px solid;
  border-top: none;
  border-left: none;
  p {
    float: left;
    width: 153px;
    margin: 13px 0;
  }
  .checkbox2 {
    width: 153px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .item-delete {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }
  .add-field {
    border: none;
  }
}
.add-field-add {
  border: none;
  margin-top: 12px;
}
.add-field-icon {
  color: var(--primary);
  font-size: 18px;
}
.add-field {
  color: var(--primary);
}
.add-field:hover {
  color: var(--primary);
}
// .add-field:onclick {
//     color: #777;
// }
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
// .ant-form {
//   position: relative;
//   left: 35px;
// }
.page-box-employer-setting {
  .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 0px 0px rgba(215, 215, 215, 1);
    font-size: 18px;
    font-weight: 600;
    color: rgba(37, 37, 37, 1);
    line-height: 22px;
  }
  .p24 {
    background: #fff;
  }
  .ant-table-thead > tr > th {
    background: #fafafa;
  }
  .ant-collapse .ant-collapse-item .ant-collapse-header .anticon {
    left: initial;
    right: 16px;
  }
  .ant-layout {
    background: #fff;
  }

  .ant-collapse-content {
    padding-bottom: 24px;
  }

  .ant-collapse-item {
    font-size: 16px;
    color: #252525;
  }
  .ant-btn-dashed {
    margin-left: 20px;
  }
}
</style>
